<template>
  <view>
    <view class="home-search">
      <my-search @my-click="gotoSearch()"></my-search>
    </view>

    <!-- 轮播图 -->
    <swiper
      class=""
      indicator-dots="true"
      indicator-color="rgba(0,0,0,.3)"
      autoplay="true"
      interval="3000"
      duration="1000"
      circular="true"
    >
      <swiper-item v-for="(item, id) in swiperList" :key="id">
        <navigator
          class="swiper"
          :url="'/subpkg/goods_detail/index?goods_id=' + item.goods_id"
        >
          <image :src="item.image_src" mode="hei" lazy-load="false"> </image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 导航栏列表 -->
    <view class="nav-list">
      <view
        class="nav-item"
        v-for="(item, id) in navList"
        :key="id"
        @click="navClickHandler(item)"
      >
        <image :src="item.image_src" mode="widthFix"></image>
      </view>
    </view>

    <!-- 楼层列表 -->
    <view class="floor-list" v-for="(item, id) in floorList" :key="id">
      <view class="floor-title">
        <image :src="item.floor_title.image_src" mode="widthFix"> </image>
      </view>
      <view class="produce-list">
        <navigator
          class="produce-left"
          :url="item.product_list[0].navigator_url"
        >
          <image
            :src="item.product_list[0].image_src"
            mode="widthFix"
            :style="{ width: item.product_list[0].image_width + 'rpx' }"
          ></image>
        </navigator>
        <view class="produce-right">
          <navigator
            :url="item2.navigator_url"
            v-for="(item2, id2) in item.product_list"
            :key="id2"
            style="display: inline-block"
          >
            <image
              v-if="id2 !== 0"
              :src="item2.image_src"
              mode="widthFix"
              :style="{ width: item2.image_width + 'rpx' }"
            ></image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mySearch from "/src/components/my-search/index";
import badgeMix from "@/mixins/tabbar-badge.js";
export default {
  name: "home",
  mixins: [badgeMix],
  components: { mySearch },
  props: {},
  data() {
    return {
      swiperList: [], // 轮播图数据
      navList: [], // 导航栏数据
      floorList: [], // 获取楼层数据
    };
  },
  computed: {},
  methods: {
    // 获取轮播图数据
    async getSwiperList() {
      const res = await uni.$http.get("/api/public/v1/home/swiperdata");
      if (res.statusCode !== 200) return uni.$showMessage("轮播图请求失败~");
      this.swiperList = res.data.message;
    },
    // 获取导航栏数据
    async getNavList() {
      const res = await uni.$http.get("/api/public/v1/home/catitems");
      if (res.statusCode !== 200)
        return uni.$showMessage("导航栏数据请求失败~");
      this.navList = res.data.message;
    },
    // 导航栏点击事件
    navClickHandler(item) {
      if (item.name === "分类") {
        uni.switchTab({
          url: "/pages/cate/index",
        });
      }
    },
    // 获取楼层数据
    async getFloorList() {
      const res = await uni.$http.get("/api/public/v1/home/floordata");
      if (res.statusCode !== 200) return uni.$showMessage("楼层数据请求失败~");
      this.floorList = res.data.message;

      // 先处理数据
      this.floorList.forEach((floor) => {
        floor.product_list.forEach((produce) => {
          return (produce.navigator_url =
            "/subpkg/goods_list/index?" +
            produce.navigator_url.split("?")[1]);
        });
      });
    },
    // 路由跳转到搜索
    gotoSearch() {
      uni.navigateTo({
        url: "/subpkg/search/index",
      });
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
    this.getSwiperList();
    this.getNavList();
    this.getFloorList();
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scope lang="scss">
.home-search {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
}
.swiper {
  height: 330rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.nav-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 15px 0;
  .nav-item {
    flex: 1;
    text-align: center;
    image {
      width: 128rpx;
      height: 140rpx;
    }
  }
}
.floor-list {
  padding: 15rpx;
  .produce-list {
    display: flex;
    flex-direction: row;
    .produce-left {
      padding-right: 10rpx;
      box-sizing: border-box;
    }
    .produce-right {
      image {
        padding-right: 6rpx;
      }
    }
  }
}
</style>